<template>
	<!-- 承办律师/参与用户   页面共用 根据tag判断来源和作用 -->
	<view class="main">
		<view class="listview">
			<view class="main_item" v-for="(item,index) in userList" @click="clickTag(item)"
			v-if="!showDelete || (showDelete && item.flag!==1)" :key="index">
				<view style="display: flex;align-items: center;justify-content: center;">
					<image :src="item.avatarPic" style="width: 112rpx;height: 112rpx;border-radius: 56rpx;" ></image>
					<image :src="icon_detele" class="icon_detele" 
					v-if="item.flag!==1 && showDelete" @click.stop="deteleItem(item,index)"></image>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;">
					<text :class="item.flag===1? 'item_name2':'item_name'">{{item.realName}}</text>
				</view>
			</view>
		</view>
		
		
		
		<view class="view-bottom" v-if="showDelete">
			<view class="view-bottom-s">
				<view class="confirm" @click="confirm">
					确 定
				</view>
			</view>
			<view style="height: 68rpx;background: #ffffff;" v-if="needAdapt">
				<!-- 苹果x及以上的安全距离 -->
			</view>
			
		</view>
	</view>
</template>

<script>
	let app = ""
	export default{
		data(){
			return{
				caseId:'',
				role:'',
				roleUrl: '',
				windowHeight: 0,
				needAdapt: false, //判断是不是苹果x以上机型
				tag:'',
				icon_detele:'../../../../static/phone/icon_detele.png',
				showDelete:false,
				moren:require('../../../../static/phone/moren.png'),
				userList:[],
			}
		},
		onLoad(options) {
			let _this = this
			app = getApp()

			_this.tag = options.tag
			_this.caseId = options.caseId
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			
			let title = ''
		
			if(options.tag=='lawyer'){title='承办律师'}
			if(options.tag=='customer'){title='参与用户'}
			uni.setNavigationBarTitle({
				title:title
			})
			
			
			
		
			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			if(_this.needAdapt){
				_this.windowHeight = (app.globalData.windowHeight - 88) * 2 + 'rpx'
			}else{
				_this.windowHeight = (app.globalData.windowHeight - 54) * 2 + 'rpx'
			}
			
		},
		onShow() {
			this.getList()
		},
		mounted() {
			
		},
		methods:{
			async getList(){
				let _this = this
				let tags = ''
				if(_this.tag=='lawyer'){
					tags = 'lawyers'
				}else{
					tags = 'users'
				}
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseUser/${tags}`,
					data: {
						caseId:_this.caseId,
					}
				})
				
				console.log('---------',res)
				
				let list = res.data.data
				for (var i = 0; i < list.length; i++) {
					let icons = list[i]['user']['account']['avatarPic']
					
					if(icons == undefined || icons == null || icons==''){
						icons = _this.moren
					}else if(icons.indexOf('http')<0){
						icons = this.$imageUrls({picUrls: icons})
					}
					
					list[i]['avatarPic'] = icons
					
					let name = list[i]['user']['account']['realName']
					if(name == undefined || name == null || name==''){
						if( tags == 'lawyers'){
							name = '承办律师'+(i+1)
						}else{
							name = '参与用户'+(i+1)
						}
						
					}
					list[i]['realName'] = name
				}
				_this.userList = list
				//获取人员后要补充两条数据
			
				
				if(_this.role!='0'){
					_this.setObj()
				}else{
					//普通用户没有新增和删除功能
					if(_this.tag!='lawyer'){
						_this.setObj()
					}
				}
				
			
			},
			
			
			/**
			 * 点击了item
			 */
			clickTag(val){
				console.log(val)
				let _this = this
				if(val.flag===1){
					//点击的增加或者删除
					if(val.realName==='添加'){
						//跳转到添加页面
						uni.navigateTo({
							url:'./addNews?caseId='+_this.caseId+'&tag='+_this.tag
						})
					}else{
						//移除
						_this.showDelete = true
					}
					
				}else{
					let users = encodeURIComponent(JSON.stringify(val))
					console.log('users',users)
					//进入详情
					uni.navigateTo({
						url:'./userDetail?tag='+this.tag+'&users='+users
					})
					
				}
			},
			
			/**
			 * 删除
			 */
			deteleItem(val,index){
				console.log('删除',val,index)
				this.userList.splice(index,1)
				console.log(this.userList)
			},
			
			/**
			 * 点击确认
			 */
			async confirm(){
				let _this = this
				_this.showDelete = false
				let list = _this.userList
				let ids = []
				for (var i = 0; i < list.length; i++) {
					if(list[i]['flag']!=1){
						ids.push(list[i]['userId'])
					}
				}
				let tags = ''
				let data={
					caseId:_this.caseId
				}
				if(_this.tag=='lawyer'){
					tags = 'lawyers'
					data.lawyerIds = ids
				}else{
					tags = 'users'
					data.userIds = ids
				}
				uni.showLoading({
					title:'正在提交数据...'
				})
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseUser/${tags}/1`,
					data: data,
					method: 'POST', //默认是GET
				})
				uni.hideLoading()
				
				if(res.data.code==200){
					uni.showToast({
						title:'提交成功',
						icon:"success"
					})
					_this.getList()
				}
			},
			
			setObj(){
				let obj1 = {
					flag:1,
					avatarPic:require('../../../../static/phone/phone_add_people.png'),
					realName:'添加'
				}
				let obj2 = {
					flag:1,
					avatarPic:require('../../../../static/phone/phone_delete_people.png'),
					realName:'移除'
				}
				this.userList.push(obj1)
				this.userList.push(obj2)
			},
		
		}
	}
</script>

<style>
	page{
		
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.main{
		
	}
	.listview{
		display: flex;
		flex-wrap: wrap;
		padding-left: 28rpx;
		padding-right: 28rpx;
	}
	.main_item{
		
		width: 25%;
		margin-top: 64rpx;
	}
	.icon_detele{
		width: 28rpx;
		height: 28rpx;
		margin-left: -28rpx;
		margin-top: -80rpx;
	}
	.item_name{
		margin-top: 12rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
		
	}
	.item_name2{
		margin-top: 12rpx;
		color: #999999;
		font-weight: 400;
			font-size: 28rpx;
	}
	.view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #E1E1E1;;
	}
	
	.view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
	
	}
	.confirm{
		width: 686rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		margin-left: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #E8F7FB;
		letter-spacing: 2rpx确 定;
	}
</style>